<template>
  <header class="rankheader">
    <div class="cartonrankicon" @click="gotocartonrank">动漫榜</div>
    <div class="gamerankicon" @click="gotogamerank">游戏榜</div>
  </header>
  <main>
    <router-view />
  </main>
</template>

<script>

export default {
  data() {
    return {
    }
  },
  methods: {
    gotocartonrank() {
      this.$router.push({ path:'/cartonrank' })
    },
    gotogamerank() {
      this.$router.push({ path:'/gamerank' })
    }
  }
}
</script>

<style lang="scss" scoped>
.rankheader {
  display: flex;
  padding: 50px 0 50px 0;
  background-color: #f8f8f8;
  .cartonrankicon {
    padding: 10px 10px 10px 10px;
    background-color: #2196F3;
    cursor: pointer;
    margin-left: 700px;
    margin-right: 140px;
  }
  .gamerankicon {
    padding: 10px 10px 10px 10px;
    background-color: #2196F3;
    cursor: pointer;
  }
}

</style>
